<!DOCTYPE html>
<html>
<head>
    <title>本地服务器图片上传</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<link href="../../../assets/img/icon/favicon.ico" rel="shortcut icon" />
    <style type="text/css">
    input[readonly] {
    	width: 100%;
    	border: 1px solid transparent;
    }
    p {
    	margin:0;
    }
    .mt-split {
    	margin-top: 15px;
    }
    </style>
</head>
<body>
<div><b>本地服务器图片上传</b></div>
<form>
<p class="mt-split"><input type="file" data-zupload="pictureUrl" name="pictureFile" /></p>
<p><input type="text" readonly name="pictureUrl" /></p>
<br/>
<p><img data-zupload="aliUrl" crossOrigin="*" width="100" src="http://anyinfo-its.image.alimmdn.com/files/2016/11/13/201820696583776.jpeg" /></p>
<p><input type="text" readonly name="aliUrl" /></p>
</form>
<p class="mt-split"><button name="upload">上传</button></p>
<pre>
</pre>
</body>
<script src="../../../assets/libs/jquery/jquery.1.11.1.js"></script>
<script src="../../../assets/libs/zhh.tools/zhh.tools.js"></script>
<script src="../../../assets/libs/zfiles/upload.js"></script>

<script type="text/javascript">
$(function() {
	$("button[name=upload]").on("click", function() {
		$("form").zupload({ 
			process:function(e) { console.log("--> " + e.percent + "%"); },
			step:function(e) { console.log(e.url); },
			done:function(e) { console.log("done!"); },
			error:function(e) { console.log(e.message); }
		});
	});
});
</script>
</html>